<template>
  <div class="test-order-detail">
    <div class="content" v-if="examinationInfo">
      <van-cell-group inset>
        <van-cell title="检验单号" :value="examinationInfo.examinationId" />
        <van-cell title="检验员" :value="examinationInfo.doctorName" />
        <van-cell title="就诊科室" :value="examinationInfo.departmentName" />
        <van-cell title="就诊地址" :value="examinationInfo.departmentAddress" />
        <van-cell title="开具时间" :value="examinationInfo.examinationDate" />
        <van-cell title="检验状态" :value="examinationInfo.status">
          <template #value>
            <van-tag :type="getStatusType(examinationInfo.status)">{{ STATUS_ENUM[examinationInfo.status] }}</van-tag>
          </template>
        </van-cell>
        <van-cell title="检验结果" :value="examinationInfo.examinationResult">
          <template #value>
            <van-text-ellipsis
                rows="1"
                :content="examinationInfo.examinationResult || '暂无结果'"
                expand-text="展开"
                collapse-text="收起"
                position="right"
            />
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 支付按钮 -->
      <div class="payment-section" v-if="examinationInfo.status === 0">
        <van-button type="primary" block @click="showPaymentPopup">去付款</van-button>
      </div>
    </div>
    
    <div v-else class="loading">
      <van-loading type="spinner" color="#1989fa" />
    </div>

    <!-- 支付方式选择弹窗 -->
    <van-popup v-model:show="showPayment" position="bottom" round>
      <div class="payment-popup">
        <div class="payment-title">选择支付方式</div>
        <div class="payment-options">
          <van-cell title="支付宝支付" is-link @click="handlePayment('alipay')" />
          <van-cell title="微信支付" is-link @click="handlePayment('wechat')" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  NavBar,
  CellGroup,
  Cell,
  Tag,
  Loading,
  Button,
  Popup,
  showToast,
  showLoadingToast,
  closeToast,
  showFailToast, showSuccessToast
} from 'vant';
import {getExaminationByIdAPI, updateExaminationStatusAPI} from "../../api/examination/examination.js";

const route = useRoute();
const router = useRouter();
const examinationInfo = ref(null);
const showPayment = ref(false);

// 返回上一页
const goBack = () => {
  router.back();
};

// 获取状态标签类型 0-待付款 1-待检验 2-检验中 3-已完成
const getStatusType = (status) => {
  switch (status) {
    case 0:
      return 'warning';
    case 1:
      return 'success';
    default:
      return 'default';
  }
};
//状态枚举值
const STATUS_ENUM = ['待付款', '待检验', '检验中', '已完成']


// 显示支付弹窗
const showPaymentPopup = () => {
  showPayment.value = true;
};

// 处理支付
const handlePayment = async (paymentType) => {
  showPayment.value = false;
  const loading = showLoadingToast({
    message: '正在处理支付...',
    forbidClick: true,
  });

  try {
    // TODO: 调用后端支付接口
    // const response = await api.createPayment({
    //   orderId: examinationInfo.value.orderId,
    //   paymentType: paymentType
    // });

    // 模拟支付过程
    const res = await updateExaminationStatusAPI(examinationInfo.value.examinationId)
    if(res.success){
      // 支付成功
      closeToast();
      // 更新订单状态
      examinationInfo.value.status = 1;
      showSuccessToast('支付成功')
      // 延迟返回上一页
      setTimeout(() => {
        router.back();
      }, 1500);
    }
  } catch (error) {
    showFailToast('支付失败');
  }
  closeToast();
};

// // 模拟订单数据
// const mockOrders = [
//   {
//     orderId: 'TEST20240320001',
//     doctor: '张医生',
//     department: '内科',
//     createTime: '2024-03-20 09:00',
//     status: '去付款'
//   },
//   {
//     orderId: 'TEST20240321002',
//     doctor: '李医生',
//     department: '外科',
//     createTime: '2024-03-21 14:30',
//     status: '待付款'
//   },
//   {
//     orderId: 'TEST20240319003',
//     doctor: '王医生',
//     department: '儿科',
//     createTime: '2024-03-19 10:00',
//     status: '待检验'
//   },
//   {
//     orderId: 'TEST20240318004',
//     doctor: '刘医生',
//     department: '骨科',
//     createTime: '2024-03-18 15:00',
//     status: '已完成'
//   }
// ];

// 获取订单详情
const getOrderDetail = async () => {
  const examinationId = route.query.examinationId;
  if (!examinationId) {
    router.back();
    return;
  }
  
  // 根据examinationId查询出对应的检验信息
  const res = await getExaminationByIdAPI(examinationId);
  if(res.success){
    examinationInfo.value = res.data;
  }else {
    showToast.fail('未找到订单信息');
    setTimeout(() => {
      router.back();
    }, 1500);
  }

};

onMounted(() => {
  getOrderDetail();
});
</script>

<style scoped>
.test-order-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.content {
  padding: 16px;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.payment-section {
  margin-top: 20px;
  padding: 0 16px;
}

.payment-popup {
  padding: 20px;
}

.payment-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.payment-options {
  margin-top: 10px;
}
</style>